<template>
    <div>
        <!-- 1.0 面包屑导航 -->
        <div class="breadcrumbStyle">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/admin/goodslist' }">购物商城</el-breadcrumb-item>
                <el-breadcrumb-item>修改内容</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 2.0 新增商品的form表单 -->
        <div class="addGoodsFormStyle">
            <el-form :model="goods" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="goods.title"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="副标题">
                            <el-input v-model="goods.sub_title"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="所属类别" prop="category_id">
                            <el-select v-model="goods.category_id" placeholder="请选择类别">
                                <el-option v-for="item in categories" :key="item.category_id" :label="item.title" :value="item.category_id">
                                    <span v-for="y in (item.class_layer-1)">&nbsp;</span>
                                    <span v-if="item.parent_id>0">|-</span>{{item.title}}
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="是否发布">
                            <el-switch v-model="goods.status" active-color="#409EFF" inactive-color="#C0CCDA">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="轮播图">
                            <el-switch v-model="goods.is_slide"></el-switch>&nbsp;&nbsp; 置顶
                            <el-switch v-model="goods.is_top"></el-switch>&nbsp;&nbsp; 推荐
                            <el-switch v-model="goods.is_hot"></el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="上传封面">
                            <el-upload class="upload-demo" action="http://39.108.135.214:8899/admin/article/uploadimg" :on-success="uploadImgSuccess"
                                :file-list="goods.imgList" list-type="picture">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="图片相册">
                            <el-upload class="upload-demo" action="http://39.108.135.214:8899/admin/article/uploadfile" :on-success="uploadFileSuccess"
                                :file-list="goods.fileList" list-type="picture">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="商品货号">
                            <el-input v-model="goods.goods_no"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="库存数量">
                            <el-input v-model="goods.stock_quantity"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="市场价格">
                            <el-input v-model="goods.market_price"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="销售价格">
                            <el-input v-model="goods.sell_price"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="内容摘要" prop="zhaiyao">
                            <el-input type="textarea" :rows="3" v-model="goods.zhaiyao"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="详细内容" prop="content">
                            <quill-editor :content="goods.content" @change="onEditorChange($event)">
                            </quill-editor>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
                    <router-link to="/admin/goodslist">
                        <el-button>取消</el-button>
                    </router-link>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style scoped>
    .breadcrumbStyle {
        height: 30px;
        line-height: 50px;
        padding: 6px;
        margin-left: 10px;
        border-bottom: 1px solid #f0f0f0;
    }

    .addGoodsFormStyle {
        margin: 10px;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #f0f0f0;
    }

    .quill-editor .ql-container.ql-snow .ql-editor.ql-blank {
        height: 100px;
    }
</style>

<script>
    // require styles
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'

    import { quillEditor } from 'vue-quill-editor'

    export default {
        data() {
            return {
                categories: [],//所属分类
                goods: {
                    title: "", //标题
                    sub_title: "", //副标题
                    status: true,//是否发布
                    is_slide: true,//显示到首页轮播图
                    is_top: true,//置顶
                    is_hot: false,//推荐
                    goods_no: "",//商品货号
                    stock_quantity: 0,//库存数量
                    market_price: 0,//市场价格
                    sell_price: 0,//销售价格
                    zhaiyao: "",//摘要
                    content: "",//详细内容
                    imgList: [
                        // {
                        //   name: 'food.jpeg',
                        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                        // }
                    ],//上传封面
                    fileList: []
                },
                rules: {
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' }
                    ],
                    category_id: [
                        { required: true, message: '请选择类别', trigger: 'blur' }
                    ],
                    zhaiyao: [
                        { required: true, message: '请输入摘要', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入详细部分', trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
            this.getCategoriesData()
        },
        methods: {
            //上传封面图片
            uploadImgSuccess(response, file, fileList) {
                this.goods.imgList = [response]
            },
            //上传图片相册
            uploadFileSuccess(response, file, fileList) {
                this.goods.fileList.push(response)
            },
            //获取所属分类数据
            getCategoriesData() {
                const url = "admin/category/getlist/goods"

                this.$axios.get(url).then(response => {
                    this.categories = response.data.message

                    //发送请求，获取要修改的商品信息
                    this.getGoodsInfoById()
                })
            },
            //获取要修改的商品信息
            getGoodsInfoById() {
                const url = `admin/goods/getgoodsmodel/${this.$route.params.goodsId}`
                this.$axios.get(url).then(response => {
                    this.goods = response.data.message
                    this.goods.category_id = this.goods.category_id - 0
                })
            },
            //提交
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const url = `admin/goods/edit/${this.$route.params.goodsId}`

                        this.$axios.post(url, this.goods).then(response => {
                            if (response.data.status == 1) {
                                this.$message.err(response.data.message)
                                return
                            }

                            this.$router.push({ name: "goodslist" })
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //富文本编辑器值改变事件
            onEditorChange(event) {
                this.goods.content = event.html
            }
        },
        components: {
            quillEditor
        }
    }
</script>